<!--双轴折线图-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

import FuncCompMixin from '@/mixin/FuncCompMixin'
import ChartCompMixin from '@/mixin/ChartCompMixin'
import PnDesigner from '@/utils/PnDesigner'
import BiaxLineChart from "./BiaxLineChart";

const _this = {
  name: 'BiaxLineChart', // 此名称必须填写，且必须与组件文件名相同
  mixins: [FuncCompMixin, ChartCompMixin],
  attr: {
    version: '2.2',
    configDataTemp: Object.assign({

      // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
      chartOption: {
        title: PnDesigner.buildTitleConfigData(),
        grid: PnDesigner.buildGridConfigData(),
        legend: PnDesigner.buildLegendConfigData(),
        tooltip: PnDesigner.buildTooltipConfigData(),
        xAxis: PnDesigner.buildXAxisConfigData({
          boundaryGap: false
        }),
        yAxis: PnDesigner.buildYAxisConfigData({
          name: '同比'
        }),
        y2Axis: PnDesigner.buildYAxisConfigData({
          name: '万元'
        }),
        series: [
          BiaxLineChart.buildSeriesObj('销售量', 'line', 0),
          BiaxLineChart.buildSeriesObj('业务1', 'line', 1)
        ]
      }

    }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
      ds_resultObjTemplate: [
        {
          field: 'name',
          remark: '类目'
        },
        {
          field: 'value',
          remark: '值'
        },
        {
          field: 'series',
          remark: '系列'
        }
      ],
      ds_resultObj: [
        {
          name: '区域1',
          value: 101,
          series: '销售量'
        },
        {
          name: '区域2',
          value: 320,
          series: '销售量'
        },
        {
          name: '区域3',
          value: 230,
          series: '销售量'
        },
        {
          name: '区域4',
          value: 950,
          series: '销售量'
        },
        {
          name: '区域5',
          value: 130,
          series: '销售量'
        },
        {
          name: '区域1',
          value: 150,
          series: '业务1'
        },
        {
          name: '区域2',
          value: 534,
          series: '业务1'
        },
        {
          name: '区域3',
          value: 334,
          series: '业务1'
        },
        {
          name: '区域4',
          value: 546,
          series: '业务1'
        },
        {
          name: '区域5',
          value: 266,
          series: '业务1'
        }
      ],
      ds_useFilter: true, // 是否使用过滤器，默认不使用
      ds_useTimer: true, // 是否开启定时器配置，默认不开启
    }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration())
  },
  data() {
    return {

    }
  },
  mounted() {
    this.init();

    this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
      this.init()
    })
  },
  methods: {
    init() { // 组价初始化函数，函数名必须使用init，不可更改
      this.initDatasource(() => {
        this.chart.setOption(this.chartOption);
        this.runCustomGlobalJsCode();
        this.runDataItemClickJsCode();
      }, (result) => {
        this.chart.setOption(this.chartOption);
        this.runCustomGlobalJsCode();
        this.runDataItemClickJsCode();
      });
    }
  },
  computed: {
    chartOption() {

      let option = {
        title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
        grid: PnDesigner.buildGridChartOption(this.component.compConfigData.chartOption.grid),
        legend: PnDesigner.buildLegendChartOption(this.component.compConfigData.chartOption.legend),
        tooltip: PnDesigner.buildTooltipChartOption(this.component.compConfigData.chartOption.tooltip),
        xAxis: [
          PnDesigner.buildXAxisChartOption(this.component.compConfigData.chartOption.xAxis)
        ],
        yAxis: [
          PnDesigner.buildYAxisChartOption(this.component.compConfigData.chartOption.yAxis),
          PnDesigner.buildYAxisChartOption(this.component.compConfigData.chartOption.y2Axis)
        ],
        series: []
      };

      // 初始化横坐标标签
      this.$PnUtil.groupArray(this.runCustomFilter(this.component.compConfigData.ds_resultObj), 'name').forEach(item => {
        option.xAxis[0].data.push(item.type)
      });

      /*this.component.compConfigData.chartOption.series.forEach((item, index) => {
        let groupItem = this.$PnUtil.groupArray(this.runCustomFilter(this.component.compConfigData.ds_resultObj), 'series')[index];
        if (groupItem) {
          option.series.push({
            name: item.name,
            type: item.type,
            yAxisIndex: item.yAxisIndex, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用

            label: {
              show: item.label.show,
              position: item.label.position,
              color: item.label.color,
              fontSize: item.label.fontSize
            },

            itemStyle: {
              color: item.itemStyle.color,
              borderColor: item.itemStyle.borderColor,
              borderWidth: item.itemStyle.borderWidth,
              borderType: item.itemStyle.borderType
            },

            lineStyle: {
              type: item.lineStyle.type,
              width: item.lineStyle.width
            },

            areaStyle: {
              color: new this.$Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: item.areaStyle.startColor ? item.areaStyle.startColor : this.currentEchartThemeColors[0]
              },
                {
                  offset: 1,
                  color: item.areaStyle.endColor ? item.areaStyle.endColor : this.currentEchartThemeColors[7]
                }
              ]),
              opacity: item.areaStyle.opacity
            },

            smooth: item.smooth, //平滑曲线显示
            symbol: item.symbol, //标记的图形为实心圆
            symbolSize: item.symbolSize, //标记的大小

            data: groupItem.list,
          });
        }
        option.legend.data.push(item.name)
      });*/

      this.$PnUtil.groupArray(this.runCustomFilter(this.component.compConfigData.ds_resultObj), 'series').forEach((resultObjItem, index) => {
        if (resultObjItem) {
          let item = this.component.compConfigData.chartOption.series[index];
          if (item) {
            option.series.push({
              name: item.name ? item.name : resultObjItem.type,
              type: item.type,
              yAxisIndex: item.yAxisIndex, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
              label: {
                show: item.label.show,
                position: item.label.position,
                color: item.label.color,
                fontSize: item.label.fontSize
              },
              itemStyle: {
                color: item.itemStyle.color,
                borderColor: item.itemStyle.borderColor,
                borderWidth: item.itemStyle.borderWidth,
                borderType: item.itemStyle.borderType
              },
              lineStyle: {
                type: item.lineStyle.type,
                width: item.lineStyle.width
              },
              areaStyle: item.areaStyle.show ? { //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new this.$Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: item.areaStyle.normal.startColor ? item.areaStyle.normal.startColor : this.currentEchartThemeColors[0],
                  },
                    {
                      offset: 1,
                      color: item.areaStyle.normal.endColor ? item.areaStyle.normal.endColor : this.currentEchartThemeColors[7]
                    }
                  ], false),
                  shadowColor: item.areaStyle.normal.shadowColor, //阴影颜色
                  shadowBlur: item.areaStyle.normal.shadowBlur, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                  opacity: item.areaStyle.normal.opacity
                }
              } : null,
              smooth: item.smooth, //平滑曲线显示
              symbol: item.symbol, //标记的图形为实心圆
              symbolSize: item.symbolSize, //标记的大小
              markLine: PnDesigner.buildMarkLineChartOption(item.markLine),
              markPoint: PnDesigner.buildMarkPointChartOption(item.markPoint),
              data: resultObjItem.list,
            });
            option.legend.data.push(item.name ? item.name : resultObjItem.type)
          }else {
            option.series.push(BiaxLineChart.buildDefaultSeriesObj(resultObjItem.type, resultObjItem.list));
            option.legend.data.push(resultObjItem.type)
          }
        }
      })

      // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
      option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

      return option;
    }
  }
};

export default _this
</script>

<style scoped>

</style>
